<script setup>
import UserTabbar from "@/components/user_components/UserTabbar.vue";
import jumpHelper from "@/js/pageJumper";
import {onMounted, ref} from "vue";
import {managerTestPost} from "@/js/apiHelper";
import {message} from "ant-design-vue";

onMounted(() => {
  jumpHelper.jumpToCustomerNewTask()
  token.value = localStorage.getItem('token')
});

const token = ref('')
const beforeJumpToManager=()=>{
  const postTest = managerTestPost(token.value)
  postTest.then(response=>{
    if (response.data.data === 'hello'){
      jumpHelper.jumpToManager()
    }else{
      message.error('权限不足')
    }
  }).catch(e=>{
    console.log(e)
    message.error('权限不足')
  })
}
const logOut=()=>{
  localStorage.removeItem('token')
  jumpHelper.jumpToSign()
}

</script>

<template>
  <div class="all-container">
    <div class="appearing-container">
      <!--tabbar-->
      <UserTabbar class="tabbar-container"/>
      <!--children route-->
      <router-view class="child-router-view"></router-view>
      <!--退出登录-->
      <img @click="logOut" class="logout-btn" src="@/assets/logout.png">
      <!--帮助和管理员页面-->
      <div class="help-manager-container">
        <div @click="beforeJumpToManager" class="help-manager">
          <img src="@/assets/manager.png">
          <h1>管理员入口</h1>
        </div>
        <div @click="jumpHelper.jumpToHelper()" class="help-manager">
          <img src="@/assets/help.png">
          <h1>帮助</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .all-container{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
  .logout-btn{
    position: fixed;
    left: 12px;
    top: 8px;
    width: 36px;
    user-select: none;
    cursor: pointer;
    transform: scaleX(-1);
  }
  .tabbar-container{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 160px;
  }
  .child-router-view{
    position: absolute;
    left: 160px;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .help-manager-container{
    position: fixed;
    right: 24px;
    top: 12px;
    width: 240px;
    height: 32px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .help-manager{
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .help-manager:hover h1{
    letter-spacing: 8px;
    transition: .4s;
  }
  .help-manager:hover img{
    transform: translateX(-12px);
    transition: .4s;
  }
  .help-manager img{
    height: 80%;
    transition: .4s;
  }
  .help-manager h1{
    font-size: 18px;
    margin-left: 2px;
    margin-bottom: 0;
    color: #444;
    white-space: nowrap;
    transition: .4s;
  }
</style>